<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/walden.js"></script>
    <script src="../../js/setdate.js"></script>
    <script src="../../libs/My97DatePicker/4.8/WdatePicker.js"></script>
    <title>到课率</title>
    <style type="text/css">
        .leftChart{
            height: 500px;
            flex: 1
        }
        .rightChart{
            height: 500px;
            flex: 1.5
        }
    </style>
</head>
<body>
<div class="row">
    <!--<div class="form-group col-sm-2">-->
    <!--<select  class="form-control" id="College">-->
    <!--</select>-->
    <!--</div>-->
    <div class="form-group col-sm-2">
        <select  class="form-control" id="option">
            <!--<option value=''>全校</option>-->
            <!--<option value='college'>学院</option>-->
            <!--<option value='class'>班级</option>-->
        </select>
    </div>
    <div class="form-group col-sm-2" style="display: none" id="CollegeSelect">
        <select  class="form-control" id="College"  >
        </select>
    </div>
    <a class="btn btn-default" onclick="query()">查询</a>
</div>
<div class="row">
    <div id="multiSelect">
    </div>
</div>
<div class="row">
    <div class="form-group col-sm-2 set-paddingLeft">
        <input type="text" class="form-control" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="startDate" name="startDate" placeholder="开始时间"/>
    </div>

    <div class="form-group col-sm-2">
        <input type="text" class="form-control" onfocus="WdatePicker({skin:'whyGreen',dateFmt:'yyyy-MM-dd HH:mm:ss'})" id="endDate" name="endDate"  placeholder="结束时间"/>
    </div>
    <div class="btn-container">
        <span  class="normal-btn normal-color" onclick="setDate('1')">今日</span>
        <span  class="normal-btn normal-color" onclick="setDate('2')">本周</span>
        <span  class="normal-btn normal-color" onclick="setDate('3')">本月</span>
    </div>
</div>
<div id="chartsContainer" style="height:500px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
    <!--到课率-->
    <div  class="leftChart" id="attendanceRate"></div>
    <!--到课率纵向比-->
    <div id="attendanceRateTime" class="rightChart" ></div>
</div>

<script>
    var attendanceRate = echarts.init(document.getElementById('attendanceRate'),'walden');
    var attendanceRateTime = echarts.init(document.getElementById('attendanceRateTime'),'walden');
    var attendanceRateOption  = {
        title : {
            text: '到课率',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['相符','不相符']
        },
        series : [
            {
                name: '占比',
                type: 'pie',
                // radius : '55%',
                // center: ['50%', '60%'],
                data:[
                    {value:335, name:'优'},
                    {value:310, name:'良'},
                    {value:234, name:'差'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var attendanceRateTimeLineOption = {
        title : {
            text: '到课率纵向比',
            x:'center'
        },
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} %'
            }
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
        ]
    };
    window.onresize = function(){
        attendanceRate.resize()
        attendanceRateTime.resize()
    }
    $(function () {
        $.ajax({
            url: baseURL + "college/getAllStudentCollege2",
            data: {},
            success: function (r) {
                $("#option").append("<option value=''>全校</option>");
                for (i = 0; i < r.list.length; i++) {
                    var tname = r.list[i].collegeName;
                    var tid = r.list[i].collegeName;
                    $("#option").append("<option value='" + tid + "'>" + tname + "</option>");
                }
            }
        });
        setDate('3')
    })

    function query()
    {
        $.ajax({
            url: baseURL + "allSchoolEcharts/studentAttendance",
            data: {
                "collegeName":$("#option").val(),
                "startDate":$("#startDate").val(),
                "endDate":$("#endDate").val()
            },
            success: function (r) {
                attendanceRateOption.series[0].data=r.coincidenceRate.series;
                attendanceRateOption.legend.data=r.coincidenceRate.legend;
                attendanceRate.setOption(attendanceRateOption);
                attendanceRateTimeLineOption.xAxis.data=r.timeLine.xData;
                attendanceRateTimeLineOption.series[0].data=r.timeLine.seriesData;
                attendanceRateTime.setOption(attendanceRateTimeLineOption);
            }
        });

    }
</script>
</body>
</html>